<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="CSS/common.css" >
    <link rel="stylesheet" href="CSS/login.css" >
</head>
<body>
    <!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./image/logo.png" alt="logo">
        <!-- 标题 -->
        <span class="head">我的博客系统</span>
        <!-- 空白占位符 -->
        <span class="spacer">欢迎来到博客世界~</span>
        <!-- 右侧的几个连接 -->
    </div>
    <!-- 登录页面的页面容器 -->
    <div class="login-container">
        <div class="login-dialog">
                <h2>登 录</h2>
                <div class="row">
                    <span>账号:</span>
                    <input type="text" id="userId" name="userId" placeholder="请输入账户邮箱或账号">
                </div>
                <div class="row">
                    <span>密码:</span>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                </div>
                <div class="row">
                    <span>验证码:</span>
                    <img src="/login/verifyCode" onclick="changeValidateCode(this)" id="validateCodeImage">
                </div>
                <div class="row">
                    <span>请输入验证码:</span>
                    <input type="text" id="verifyCode" name="picture" maxlength="6" placeholder="请输入验证码">
               </div>
               <div class="row">
                <a href="blog_register.html">还没有账号？点击注册</a>
               </div>
                <div class="row">
                    <input type="button" value="登 录" id="submit">
                </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        let img = document.querySelector("#validateCodeImage");

        let username = jQuery("#userId");
        console.log(username);
        let password_d = jQuery("#password");
        let co = jQuery("#verifyCode");
        function changeValidateCode(obj){
            var timeNow = new Date().getTime();
            obj.src="/login/verifyCode?d="+timeNow ;
        }

        //提交登录请求
        $(function(){
            $("#submit").click(function (){
                let userId = $("#userId").val();
                let password = $("#password").val();
                let code = $("#verifyCode").val();

                if(userId == null || userId == ""){
                    alert("请输入账号~");
                    return false;
                }else if(userId.length < 8 || userId.length > 24){
                    alert("邮箱格式错误，请输入8-24位邮箱账号~");
                    return false;
                }
                if(password == null || password == ""){
                    alert("请输入密码~");
                    return false;
                }else if(password.length < 6 || password.length > 24){
                    alert("密码长度不符，请重新输入~");
                    return false;
                }
                if(code.length < 6){
                    alert("验证码有误，请核对验证码~");
                    return false;
                }
                //执行异步http（AJAX）请求
                $.ajax({
                    url:"/login/sub",
                    data:{
                        "account":userId,
                        "password":password,
                        "verifyCode":code
                    },
                    type:"POST",
                    dataType:"json",
                    success:function(data){
                        if(data.status == 1){
                            alert(data.message);
                            window.location.href = 'blog_list.html';
                        }else{
                            alert(data.message);
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>